import React, { useEffect, useState } from 'react'
import { Layout, Menu } from 'antd';
import {
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import './index.css'
import { withRouter } from 'react-router-dom';
import axios from 'axios';


const { Sider } = Layout;
const { SubMenu } = Menu;
//模拟数组结构
// const menuList = [
//   {
//     key:'/home',
//     title:'首页',
//     icon:<UserOutlined/>
//   },
//   {
//     key:'/user-manage',
//     title:'用户管理',
//     icon:<UserOutlined/>,
//     children:[
//       {
//         key:'/user-manage/list',
//         title:'用户列表',
//         icon:<UserOutlined/>,
//       }
//     ]
//   },
//   {
//     key:'/right-manage',
//     title:'权限管理',
//     icon:<UserOutlined/>,
//     children:[
//       {
//         key:'/right-manage/role/list',
//         title:'角色列表',
//         icon:<UserOutlined/>,
//       },
//       {
//         key:'/right-manage/right/list',
//         title:'权限列表',
//         icon:<UserOutlined/>,
//       }
//     ]
//   },
// ]

//后端数据中没有图标icon，需要模拟映射
const iconList = {
  "/home": <UserOutlined />,
  "/user-manage/list": <UploadOutlined />,
  "/user-manage": <UploadOutlined />,
  "/right-manage/role/list": <UserOutlined />,
  "/right-manage": <UserOutlined />,
  "/right-manage/right/list": <UserOutlined />
}

function SideMenu(props) {
  const [meun, setMeun] = useState([])
  useEffect(() => {
    axios.get("http://localhost:5000/rights?_embed=children").then(res => {
      // console.log(res.data);
      setMeun(res.data)
    })
  }, [])

  //声明一个函数判断后端数据中pagepermisson===1时才进行页面渲染
  const checkPagePermisson = (item) => {
    return item.pagepermisson === 1
  }
  const renderMenu = (menuList) => {
    return menuList.map(item => {
      //&& checkPagePermisson()通过函数判断....(通过下标判断取消首页前面图标item.children?.length>0 问号前面如果为假则不执行后面代码)
      if (item.children?.length > 0 && checkPagePermisson(item)) {
        //此处的icon={iconList[item.key]}图片通过模拟映射设置获取
        return <SubMenu key={item.key} icon={iconList[item.key]} title={item.title}>
          {/* 渲染孩子组件时可以选择.map或者递归的方法，此处建议选择递归 */}
          {renderMenu(item.children)}
        </SubMenu>
      }
      return checkPagePermisson(item) && <Menu.Item key={item.key} icon={iconList[item.key]} onClick={() => {
        // history为props中的参数拿到它
        // console.log(props);
        props.history.push(item.key)
      }}>{item.title}</Menu.Item>
    })
  }
  // console.log(props.location.pathname);
  //通过props.location.pathname拿到key在设置为高亮
  const selectKeys = [props.location.pathname]
  // 通过split截取指定的值来设置高亮
  const openKeys = ["/" + props.location.pathname.split("/")[1]]
  return (
    <Sider trigger={null} collapsible collapsed={false}>
      {/* 滚动条设置 */}
      <div style={{display:"flex",height:"100%","flexDirection":"column"}}>
        <div className="logo" >新闻管理_CRM</div>
        <div style={{flex:1,"overflow":"auto"}}>
          {/* 动态显示高亮selectedKeys={['1']}  defaultOpenKeys={}导航栏选中打开状态 */}
          <Menu theme="dark" mode="inline" selectedKeys={selectKeys} defaultOpenKeys={openKeys}>
            {renderMenu(meun)}
          </Menu>
        </div>
      </div>
    </Sider>
  )
}
// 在导出之前用withRouter把SideMenu当做参数传入，让高阶组件获取低阶组件生成高阶组件，才能让低阶拿到props
export default withRouter(SideMenu)